<template>
	<view class="container">
	  <view class="header">
		<view class="user-info" @click="editUser">
		  <image class="avatar" src="../static/avatar.png" alt="avatar" />
		  <text class="username">用户名</text>
		  <img src="../static/跳转.png" style="height: 30px;width: 30px;"/>
		</view>
		<view class="emergency-contact" @click="navigateToEmergencyContact">
		  <img src="../static/医疗.png" style="height: 40px; width: 50px;"/>
		  <view class="contact-info">
			<text class="title">设备紧急联系人</text>
			<text class="subtitle">用于紧急情况下，设备使用者与亲属联系</text>
		  </view>
		  <img src="../static/跳转.png" style="height: 30px;width: 30px;"/>
		</view>
	  </view>
	  <view class="divider"></view>
	  <view class="menu">
		<view class="menu-item" @click="turnToFavorite">
		  <img src="../static/收藏.png" alt="收藏" style="width: 20px; height: 20px; margin: 10px;"/>
		  <text class="label">我的收藏</text>
		  <img src="../static/跳转.png" style="width: 20px; height: 20px;">
		</view>
		<view class="menu-item" @click="turnToDevice">
		  <img src="../static/设备.png" alt="设备" style="height: 20px;width: 20px; margin: 10px;"/>
		  <text class="label">我的设备</text>
		  <img src="../static/跳转.png" style="width: 20px; height: 20px;">
		</view>
	  </view>
	  <view class="logout">
		<button class="logout-button">退出登录</button>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		  
	  };
	},
	methods: {
	  turnToFavorite(){
		  uni.navigateTo({
		  url: 'myFavorite'
		  });
	  },
	  turnToDevice(){
		  uni.navigateTo({
		  url: 'device'
		  });
	  },
	  navigateToEmergencyContact() {
		uni.navigateTo({
		  url: '/pages/mine/contacts'
		});
	  },
	  editUser() {
		uni.navigateTo({
		  url: '/pages/mine/edit' // 修改为正确的路径
		})
	  },
	  logout() {
		uni.showToast({
		  title: '已退出登录',
		  icon: 'none'
		});
	  }
	}
  };
  </script>
  
  <style scoped>
  .container {
	padding: 10px;
	background-color: #f8f8f8;
  }
  .header {
	background: linear-gradient(to bottom, #ff4d4f, #f8f8f8); /* 渐变背景 */
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  .user-info {
	display: flex;
	align-items: center;
	margin: 10px;
	color: white; /* 设置文字颜色 */
  }
  .avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 10px;
  }
  .username {
	font-size: 18px;
	font-weight: bold;
  }
  .divider {
	width: 100%;
	height: 1px;
	background-color: #e0e0e0;
	margin: 10px 5px 0;
  }
  .emergency-contact {
	background-color: #ff4d4f;
	color: white;
	cursor: pointer; /* 添加鼠标指针样式 */
	padding: 18px;
	border-radius: 5px;
	display: flex;
	margin: 5px 0;
	align-items: center;
  }
  .contact-info {
	display: flex;
	flex-direction: column; /* 垂直排列 */
	align-items: flex-start; /* 左对齐 */
  }
  .contact-icon {
	width: 50px;
	height: 50px;
	align-items: flex-start;
  }
  .contact-text {
	display: flex;
	flex-direction: column;
  }
  .title {
	font-size: 16px;
	font-weight: bold;
  }
  .subtitle {
	font-size: 12px;
  }
  .menu {
	margin-bottom: 20px;
  }
  .menu-item {
	display: flex;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #e0e0e0;
  }
  .icon {
	font-size: 24px;
	margin-right: 10px;
  }
  .label {
	flex: 1;
	font-size: 16px;
  }
  .arrow-icon {
	width: 20px;
	height: 20px;
  }
  .logout {
	text-align: center;
  }
  .logout-button {
	background-color: #999;
	color: white;
	margin-top: 200px;
	padding: 5px 10px;
	border-radius: 5px;
  }
  </style>